<template>
  <div style="background-color: #ffffff; padding: 24px">
    <div><h1>服务数据</h1></div>
    <a-tabs style="margin-top: 16px">
      <a-tab-pane key="1" tab="商品质量">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <div slot="tab" style="padding: 10px">
              <div>商品好评率</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店商品好评率</h1>
            <canvas></canvas>
          </a-tab-pane>
          <a-tab-pane key="2">
            <div slot="tab" style="padding: 10px">
              <div>评价订单数</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店评价订单数</h1>
            <canvas></canvas>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane key="2" tab="客户服务">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <div slot="tab" style="padding: 10px">
              <div>准时发货率</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店准时发货率</h1>
            <canvas></canvas>
          </a-tab-pane>
          <a-tab-pane key="2">
            <div slot="tab" style="padding: 10px">
              <div>虚假发货率</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店虚假发货率</h1>
            <canvas></canvas>
          </a-tab-pane>
          <a-tab-pane key="3">
            <div slot="tab" style="padding: 10px">
              <div>IM平均回复时长</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店IM平均回复时长</h1>
            <canvas></canvas>
          </a-tab-pane>
          <a-tab-pane key="4">
            <div slot="tab" style="padding: 10px">
              <div>服务好评率</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店服务好评率</h1>
            <canvas></canvas>
          </a-tab-pane>
          <a-tab-pane key="5">
            <div slot="tab" style="padding: 10px">
              <div>客诉率</div>
              <div>-</div>
              <div>较前一天下降了</div>
            </div>
            <h1>本店客诉率</h1>
            <canvas></canvas>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <span slot="tabBarExtraContent">数据更新时间: 2020-09-04</span>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: 'ServiceAnalyze'
}
</script>

<style scoped>

</style>
